        <!DOCTYPE html>
        <html>
        <head>
                <meta charset="utf-8">
        <title>RingDemo class / ring_demo.dart Library / Dart Documentation</title>
        <link rel="stylesheet" type="text/css"
            href="../styles.css">
        <link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet" type="text/css">
        <link rel="shortcut icon" href="../favicon.ico">
        
        </head>
        <body data-library="ring_demo.dart" data-type="RingDemo">
        <div class="page">
        <div class="header">
          <a href="../index.html"><div class="logo"></div></a>
          <a href="../index.html">Dart Documentation</a>
         &rsaquo; <a href="../ring_demo.dart.html">ring_demo.dart</a> &rsaquo; <a href="../ring_demo.dart/RingDemo.html">RingDemo</a>        <div id="search-box">
          <input type="search" name="q" id="q" autocomplete="off"
              class="search-input" placeholder="Search API">
        </div>
        
      </div>
      <div class="drop-down" id="drop-down"></div>
      
        <div class="nav">
        
<h2><div class="icon-library"></div><a href="../metadata.html">metadata</a></h2><h2><div class="icon-library"></div><a href="../ring_demo.dart.html">ring_demo.dart</a></h2><ul class="icon">
<li><a href="../ring_demo.dart/Ring.html"><div class="icon-class"></div>Ring</a></li>
<li><div class="icon-class"></div><strong>RingDemo</strong></li>
</ul>
</div>
<div class="content">
        <h2><strong>RingDemo</strong>
          class
        </h2>
        
<button id="show-inherited" class="show-inherited">Hide inherited</button>
<div class="doc">
<p>Specifies the mechanics of drawing animated <a class="crossref" href="../ring_demo.dart/Ring.html">Ring</a>s to a canvas element.</p>
<p>The constructor accepts the canvas element to draw to, which must be 
present in the DOM before creating an instance of <a class="crossref" href="../ring_demo.dart/RingDemo.html#RingDemo">RingDemo</a>.</p>
<pre class="source">
class RingDemo {

 /// Random number generator
 final Random rng = new Random();

 /// The canvas element our context will derive from.
 final CanvasElement canvas;
 
 /// The rendering context we will be drawing to.
 final CanvasRenderingContext2D context;

 /// A list of ring objects.
 List&lt;Ring&gt; rings;

 /// Class constructor.
 ///
 /// Constructor sets the context and generates the [Ring] objects, but does not
 /// start the rendering process.
 /// 
 /// ##Arguments:
 /// 1. [canvas]: requires a reference to a canvas element from the dom.
 /// 2. [maxRings]: the maximum number of rings to render.
 RingDemo(CanvasElement canvas, [int maxRings = 100])
     : this.canvas = canvas,
     this.context = canvas.getContext("2d") {    
   // Populate the list of rings with randomized starting positions.
   generateRings(maxRings);
 }
 
 /// Populates a list with randomly sized and positioned [Ring] objects.
 /// 
 /// This function must be called before attempting to render to the [canvas].
 void generateRings(int maxRings) {
   // Define our list as a list of Ring objects with no maximum size.
   rings = new List&lt;Ring&gt;(maxRings);
   
   // To hold the [Ring]'s details
   int x, y;
   double radius, maxRadius, multiplier;
   
   // Specify a buffer zone not to center rings in, to keep them off the edges
   int xBuffer = (canvas.width * .1).round();
   int yBuffer = (canvas.height * .1).round();
   
   // Populate our list of [Ring]s by specifying them one at a time.
   for (int i = 0; i &lt; maxRings; i++) {
     // Set a safe coordinate for the ring.
     x = rng.nextInt(canvas.width - (xBuffer * 2)) + xBuffer;
     y = rng.nextInt(canvas.height - (yBuffer * 2)) + yBuffer;
     
     // Now that we know the x and y coordinates of the ring's center
     // we can determine the maximum radius this ring can achieve before it 
     // collides with the edge of the canvas.
     maxRadius = [x, y, canvas.width - x, canvas.height - y]
       .reduce(min)
       .toDouble();
           
     // Set a random starting radius
     radius = rng.nextDouble() * maxRadius;
     
     // Set a multiplier somewhere between 0.5 and 2.5.
     multiplier = (rng.nextDouble() * 2.0) + 0.5;
     
     // Create a new [Ring] and specify the details in the constructor.
     rings[i] = new Ring(x, y, radius, maxRadius, 
         255, 255, 255, 1.0, multiplier);
   }
 }

 /// Processes the animation.
 /// 
 /// This function processes each [Ring] object in the populated list.
 /// Each time this function is called it will expand or collapse 
 /// each ring accordingly and set the color of the [Ring] according to 
 /// its percentage of radius to maxRadius.
 void render() {    
   // Start by clearing the screen
   context.setStrokeColorRgb(0, 0, 0, 255);
   context.fillRect(0, 0, canvas.width, canvas.height);
   
   // Process each [Ring] independently.
   for (Ring ring in rings) {
     // Modify the [Ring]'s radius by the value of its multiplier.
     ring.radius += ring.multiplier;
     
     // Determine if the ring is expanding or collapsing.
     // If expanding, then continue until the [Ring] is larger than 
     // it's maximum radius then reset to the maximum radius and 
     // flip the multiplier to decrement.
     // If collapsing, continue until the [Ring] has a radius of less than
     // 1, then reset the radius to 1 and flip the multiplier to increment.
     if (ring.multiplier &gt; 0) {
       if (ring.radius &gt; ring.maxRadius) {
         ring.radius = ring.maxRadius;
         ring.multiplier *= -1.0;
       }
     } else {
       if (ring.radius &lt; 1) {
         ring.radius = 1.0;
         ring.multiplier *= -1.0;
       }
     }
     
     // To fade the ring, get the percentage of current radius to 
     // maximum radius. Setting the ring's alpha to this gives you 
     // full translucency at radius 0 and total opacity at maximum radius.
     double pctAlpha = ring.radius / ring.maxRadius;
     ring.alpha = pctAlpha;
     
     // To draw the ring (a circle), we specify an arc with 360 degrees drawn.
     context.beginPath();
     context.arc(ring.x, ring.y, ring.radius, 0, PI * 2, false);
     context.closePath();
     
     // Set the stroke (i.e., line) color to the Ring's specifications.
     context.setStrokeColorRgb(ring.red, ring.green, ring.blue, ring.alpha);
     
     // Draw the arc as specified.
     context.stroke();
   }
   
   // Dart provides a [Future] that returns when the window says that it's
   // an optimal time to render the image again. Trust it!
   window.animationFrame.then((time) =&gt; render()); 
 }
}
</pre>
</div>
<div>
<h3>Constructors</h3>
<div class="method"><h4 id="RingDemo">
<button class="show-code">Code</button>
new <strong>RingDemo</strong>(<a href="http://api.dartlang.org/dart_html/CanvasElement.html">CanvasElement</a> canvas, [<a href="http://api.dartlang.org/dart_core/int.html">int</a> maxRings = 100]) <a class="anchor-link" href="#RingDemo"
              title="Permalink to RingDemo.RingDemo">#</a></h4>
<div class="doc">
<p>Class constructor.</p>
<p>Constructor sets the context and generates the <a class="crossref" href="../ring_demo.dart/Ring.html">Ring</a> objects, but does not
start the rendering process.</p>
<h2>Arguments:</h2><ol><li>
<span class="param">canvas</span>: requires a reference to a canvas element from the dom.</li><li>
<span class="param">maxRings</span>: the maximum number of rings to render.</li></ol>
<pre class="source">
RingDemo(CanvasElement canvas, [int maxRings = 100])
   : this.canvas = canvas,
   this.context = canvas.getContext("2d") {    
 // Populate the list of rings with randomized starting positions.
 generateRings(maxRings);
}
</pre>
</div>
</div>
</div>
<div>
<h3>Properties</h3>
<div class="field"><h4 id="canvas">
<button class="show-code">Code</button>
final <a href="http://api.dartlang.org/dart_html/CanvasElement.html">CanvasElement</a>         <strong>canvas</strong> <a class="anchor-link"
            href="#canvas"
            title="Permalink to RingDemo.canvas">#</a>
        </h4>
        <div class="doc">
<p>The canvas element our context will derive from.</p>
<pre class="source">
final CanvasElement canvas
</pre>
</div>
</div>
<div class="field"><h4 id="context">
<button class="show-code">Code</button>
final <a href="http://api.dartlang.org/dart_html/CanvasRenderingContext2D.html">CanvasRenderingContext2D</a>         <strong>context</strong> <a class="anchor-link"
            href="#context"
            title="Permalink to RingDemo.context">#</a>
        </h4>
        <div class="doc">
<p>The rendering context we will be drawing to.</p>
<pre class="source">
final CanvasRenderingContext2D context
</pre>
</div>
</div>
<div class="field"><h4 id="rings">
<button class="show-code">Code</button>
<a href="http://api.dartlang.org/dart_core/List.html">List</a>&lt;<a href="../ring_demo.dart/Ring.html">Ring</a>&gt;         <strong>rings</strong> <a class="anchor-link"
            href="#rings"
            title="Permalink to RingDemo.rings">#</a>
        </h4>
        <div class="doc">
<p>A list of ring objects.</p>
<pre class="source">
List&lt;Ring&gt; rings
</pre>
</div>
</div>
<div class="field"><h4 id="rng">
<button class="show-code">Code</button>
final <a href="http://api.dartlang.org/dart_math/Random.html">Random</a>         <strong>rng</strong> <a class="anchor-link"
            href="#rng"
            title="Permalink to RingDemo.rng">#</a>
        </h4>
        <div class="doc">
<p>Random number generator</p>
<pre class="source">
final Random rng = new Random()
</pre>
</div>
</div>
</div>
<div>
<h3>Methods</h3>
<div class="method"><h4 id="generateRings">
<button class="show-code">Code</button>
void <strong>generateRings</strong>(<a href="http://api.dartlang.org/dart_core/int.html">int</a> maxRings) <a class="anchor-link" href="#generateRings"
              title="Permalink to RingDemo.generateRings">#</a></h4>
<div class="doc">
<p>Populates a list with randomly sized and positioned <a class="crossref" href="../ring_demo.dart/Ring.html">Ring</a> objects.</p>
<p>This function must be called before attempting to render to the <a class="crossref" href="../ring_demo.dart/RingDemo.html#canvas">canvas</a>.</p>
<pre class="source">
void generateRings(int maxRings) {
 // Define our list as a list of Ring objects with no maximum size.
 rings = new List&lt;Ring&gt;(maxRings);
 
 // To hold the [Ring]'s details
 int x, y;
 double radius, maxRadius, multiplier;
 
 // Specify a buffer zone not to center rings in, to keep them off the edges
 int xBuffer = (canvas.width * .1).round();
 int yBuffer = (canvas.height * .1).round();
 
 // Populate our list of [Ring]s by specifying them one at a time.
 for (int i = 0; i &lt; maxRings; i++) {
   // Set a safe coordinate for the ring.
   x = rng.nextInt(canvas.width - (xBuffer * 2)) + xBuffer;
   y = rng.nextInt(canvas.height - (yBuffer * 2)) + yBuffer;
   
   // Now that we know the x and y coordinates of the ring's center
   // we can determine the maximum radius this ring can achieve before it 
   // collides with the edge of the canvas.
   maxRadius = [x, y, canvas.width - x, canvas.height - y]
     .reduce(min)
     .toDouble();
         
   // Set a random starting radius
   radius = rng.nextDouble() * maxRadius;
   
   // Set a multiplier somewhere between 0.5 and 2.5.
   multiplier = (rng.nextDouble() * 2.0) + 0.5;
   
   // Create a new [Ring] and specify the details in the constructor.
   rings[i] = new Ring(x, y, radius, maxRadius, 
       255, 255, 255, 1.0, multiplier);
 }
}
</pre>
</div>
</div>
<div class="method"><h4 id="render">
<button class="show-code">Code</button>
void <strong>render</strong>() <a class="anchor-link" href="#render"
              title="Permalink to RingDemo.render">#</a></h4>
<div class="doc">
<p>Processes the animation.</p>
<p>This function processes each <a class="crossref" href="../ring_demo.dart/Ring.html">Ring</a> object in the populated list.
Each time this function is called it will expand or collapse 
each ring accordingly and set the color of the <a class="crossref" href="../ring_demo.dart/Ring.html">Ring</a> according to 
its percentage of radius to maxRadius.</p>
<pre class="source">
void render() {    
 // Start by clearing the screen
 context.setStrokeColorRgb(0, 0, 0, 255);
 context.fillRect(0, 0, canvas.width, canvas.height);
 
 // Process each [Ring] independently.
 for (Ring ring in rings) {
   // Modify the [Ring]'s radius by the value of its multiplier.
   ring.radius += ring.multiplier;
   
   // Determine if the ring is expanding or collapsing.
   // If expanding, then continue until the [Ring] is larger than 
   // it's maximum radius then reset to the maximum radius and 
   // flip the multiplier to decrement.
   // If collapsing, continue until the [Ring] has a radius of less than
   // 1, then reset the radius to 1 and flip the multiplier to increment.
   if (ring.multiplier &gt; 0) {
     if (ring.radius &gt; ring.maxRadius) {
       ring.radius = ring.maxRadius;
       ring.multiplier *= -1.0;
     }
   } else {
     if (ring.radius &lt; 1) {
       ring.radius = 1.0;
       ring.multiplier *= -1.0;
     }
   }
   
   // To fade the ring, get the percentage of current radius to 
   // maximum radius. Setting the ring's alpha to this gives you 
   // full translucency at radius 0 and total opacity at maximum radius.
   double pctAlpha = ring.radius / ring.maxRadius;
   ring.alpha = pctAlpha;
   
   // To draw the ring (a circle), we specify an arc with 360 degrees drawn.
   context.beginPath();
   context.arc(ring.x, ring.y, ring.radius, 0, PI * 2, false);
   context.closePath();
   
   // Set the stroke (i.e., line) color to the Ring's specifications.
   context.setStrokeColorRgb(ring.red, ring.green, ring.blue, ring.alpha);
   
   // Draw the arc as specified.
   context.stroke();
 }
 
 // Dart provides a [Future] that returns when the window says that it's
 // an optimal time to render the image again. Trust it!
 window.animationFrame.then((time) =&gt; render()); 
}
</pre>
</div>
</div>
</div>
        </div>
        <div class="clear"></div>
        </div>
        <div class="footer">
          <div>This page was generated at 2013-05-16 22:23:54.525</div>
        </div>
        <script async src="../client-static.js"></script>
        </body></html>
        
